<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录界面</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="./layui/css/layui.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.js"></script>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(to bottom, #fff 50%, #2E8B57 50%);
            font-family: Arial, sans-serif;
        }
        .demo-login-container {
            width: 320px;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            background-color: #fff;
            border-radius: 8px;
            position: relative;
        }
        .demo-login-container h2 {
            margin-bottom: 20px;
            color: #2E8B57;
            text-align: center;
        }
        .layui-form-item {
            margin-bottom: 20px;
        }
        .layui-input-wrap {
            border: 1px solid #e6e6e6;
            border-radius: 4px;
            overflow: hidden;
        }
        .layui-input {
            border: none;
            background-color: transparent;
        }
        .layui-btn-fluid {
            width: 100%;
        }
        /* 添加新的样式 */
        .logo {
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 24px;
            font-weight: bold;
            color: #2E8B57;
        }
    </style>
</head>
<body>
<form class="layui-form" action="" lay-filter="demo-login">
    <div class="demo-login-container">
        <h2>登录</h2>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-username"></i>
                </div>
                <input type="text" id="username" name="user_name" value="" lay-verify="required|username" placeholder="请输入账户" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-password"></i>
                </div>
                <input type="password" name="user_pwd" value="" lay-verify="required|password" placeholder="请输入密码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
            </div>
        </div>
        <div class="layui-form-item">
            <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
        </div>
        <div class="layui-form-item">
            <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>
        </div>
    </div>
    <!-- 添加 logo 文本 -->
    <div class="logo">小药店管理系统</div>
</form>

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="./layui/layui.js"></script>
<script>
    layui.config({
        base: '' //静态资源所在路径
    }).extend({
    }).use(['layer', 'form'], function(){
        var $ = layui.$
            ,layer = layui.layer
            ,form = layui.form;

        // 自定义验证规则
        form.verify({
            username: function(value) {
                var reg = /^[a-zA-Z0-9]{5,18}$/;
                if (!reg.test(value)) {
                    return "用户名长度在5~18之间，只能包含字母、数字和下划线";
                }
            },
            password: function(value) {
                var reg = /\w{5,18}$/;
                if (!reg.test(value)) {
                    return "密码长度在5~18之间，只能包含字母、数字和下划线";
                }
            },
            vercode: function(value) {
                var reg = /^[A-Za-z0-9]{4}$/;
                if (!reg.test(value)) {
                    return "验证码格式错误";
                }
            }
        });

        // 登录按钮绑定点击事件
        form.on('submit(demo-login)', function(obj) {
            console.log("发送的表单数据:", obj.field); // 打印要发送的数据
            // 加密密码
            var encryptedPassword = obj.field.user_pwd; // 使用MD5加密
            obj.field.user_pwd = encryptedPassword; // 将加密后的密码替换原密码

            // 存储加密后的密码到 localStorage
            localStorage.setItem("encryptedUserPwd", encryptedPassword);

            $.ajax({
                url: "http://localhost:8080/login", // 后端接口
                type: "post", // 提交参数方式get|post
                data: JSON.stringify(obj.field), // 提交参数
                contentType: "application/json;charset=utf-8",
                dataType: "json", // 后端返回的参数类型：json、html、text......
                success: function(res) { // 成功后的回调函数 res = RespResult
                    console.log("响应数据:", res); // 打印整个响应对象
                    if (res.code == 0) {
                        console.log("登录成功，返回数据:", res.data); // 添加调试信息
                        if (res.data) {
                            // 新增：将用户名，密码存储在 localStorage 中
                            localStorage.setItem("sysAdminInfo", JSON.stringify(res.data));
                            layer.msg(res.message, {
                                offset: '15px',
                                icon: 1,
                                time: 1000
                            }, function() {
                                location.href = 'views/index.html'; // 后台主页
                            });
                        } else {
                            console.error("返回数据为空，res.data:", res.data); // 记录错误信息
                            layer.msg("返回数据为空", {
                                offset: '15px',
                                icon: 5,
                                time: 2000
                            });
                        }
                    } else {
                        // 错误提示
                        layer.msg(res.message, {
                            offset: '15px',
                            icon: 5,
                            time: 2000
                        });
                    }
                },
                error: function(xhr, status, error) {
                    console.error("AJAX 请求失败:", xhr, status, error);
                    layer.msg("登录失败，请重试", {
                        offset: '15px',
                        icon: 5,
                        time: 2000
                    });
                }
            });
            return false; // 阻止表单默认提交行为
        });
    });
</script>
</body>
</html>
